<template>
  <div id="app">
    <div id="notificationBar"></div>
    <div class="appMain" id="appMain">
      <div id="loading-model" v-show="modelFlag">
        <div>
          <img alt :class="[modelFlag && 'show']" src="./assets/images/base/loading.gif" />
        </div>
      </div>
      <template v-if="$route.meta.noTrans">
        <keep-alive :include="keepAliveArr">
          <router-view></router-view>
        </keep-alive>
      </template>
      <template v-else>
        <transition name="fade-transform" mode="out-in">
          <keep-alive :include="keepAliveArr">
            <router-view></router-view>
          </keep-alive>
        </transition>
      </template>
    </div>
  </div>
</template>
<script>
import * as Cookies from 'tiny-cookie'
import { mapGetters } from 'vuex'
import Vue from 'vue'
import FastClick from 'fastclick'
import url from '@/common/api'
import { setToken } from '@/common/auth'

export default {
  name: 'App',
  directives: {
    focus: {
      inserted: (el) => {
        el.focus()
      }
    }
  },
  data() {
    return {
      msgType: 0, // 0 是默认，没有图片样式，
      modelFlag: false,
      openId: '', // 微信登录返回的微信openId
      statusHeight: 0,
      popDialog: false
    }
  },
  methods: {
    openLoading(text) {
      this.tipText = text
      this.modelFlag = true
    },
    closeLoading() {
      this.modelFlag = false
    },
    getUrlParam(url, name) {
      var reg = new RegExp('(^|&|\\?)' + name + '=([^&]*)(&|$)')
      var r = url.match(reg)
      if (r != null) return decodeURI(r[2])
      return null
    },
    init() {
      FastClick.attach(document.body)
      Vue.prototype.$openLoading = this.openLoading
      Vue.prototype.$closeLoading = this.closeLoading
    }
  },
  computed: {
    ...mapGetters([
      'keepAliveArr'
    ]),
    loginState: {
      get() {
        return this.$store.state.isLogin
      },
      set(val) {
        this.$store.dispatch('setLoginState', val)
      }
    },
    key() {
      return this.$route.fullPath
    }
  },
  created() {
    this.init()
  },
}
</script>
<style lang="scss" type="text/scss">
@import 'styles/rest.scss';

body {
  touch-action: manipulation;
  -moz-touch-action: manipulation;
  -ms-touch-action: manipulation;
  -o-touch-action: manipulation;
  -webkit-touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
}

#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

#notificationBar {
  background-color: #fff;
  position: absolute;
  top: 0;
  width: 100%;
  /*transition: all ease 1s;*/
}

.yd-dialog-black-mask,
.yd-dialog-white-mask {
  z-index: 2015 !important;
}

.pop-dialog {
  .yd-mask {
    z-index: 2013 !important;
  }
  .yd-popup-center {
    z-index: 2014 !important;
  }
  .pop-dialog-content {
    width: 100%;
    height: auto;
    background: #fff;
    border-radius: rem(26);
    padding-top: rem(30);
    overflow: hidden;
    .pop-title {
      text-align: center;
      font-size: rem(34);
      font-family: PingFang-SC-Bold;
      font-weight: bold;
      color: rgba(0, 0, 0, 1);
    }
    .pop-msg {
      padding: 0 rem(30);
      text-align: center;
      font-size: rem(26);
      font-weight: 500;
      font-family: PingFangSC-Regular;
      color: #000;
      margin-top: rem(18);
    }
    .pop-submsg {
      margin: 0;
    }
    .pop-btn {
      margin-top: rem(30);
      border-top: rem(2) solid #e5e5e5;
      height: rem(88);
      display: flex;
      justify-content: space-between;
      .close-pop {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50%;
        height: rem(88);
        color: $mainColor;
        font-size: rem(30);
        position: relative;
        &:first-child {
          border-right: rem(2) solid #e5e5e5;
        }
        &.one-btn {
          width: 100%;
          border: none;
        }
      }
    }
  }
}

.appMain {
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: #fff;
  #loading-model {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /*background-color: #fff;*/
    z-index: 99999;
    & > div {
      /* display: inline-block;
         width: rem(380);
         height: rem(380);
         background: rgba(0, 0, 0, 0.7);
         border-radius: rem(20);*/
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      img {
        display: block;
        width: rem(300);
        height: rem(300);
        opacity: 0;
        /*transition: all 0.2s ease;
          transition-delay: 1s;
          -webkit-transition-delay: 1s;*/
        &.show {
          opacity: 1;
        }
      }
      p {
        font-size: rem(30);
        margin: rem(31) auto 0;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        line-height: 1.2;
        color: rgba(255, 255, 255, 1);
      }
    }
  }
  .marked_Words {
    width: 100%;
    position: absolute;
    text-align: center;
    z-index: 9999;
    /* top: 42%; */
    height: 100%;
    display: flex;
    justify-content: center;
    padding-top: 30px;
    font-size: 16px;
    color: #999000;
  }
  .popup-login {
    .popup-bg {
      position: absolute;
      left: 0;
      right: 0;
      top: rem(40);
      bottom: 0;
      background: url('./assets/images/base/boxshadow.png') no-repeat;
      background-size: rem(750) 100%;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      .login-container {
        width: rem(710);
        height: rem(1000);
        background: linear-gradient(
          135deg,
          rgba(13, 174, 255, 1) 0%,
          rgba(0, 94, 254, 1) 100%
        );
        border-radius: rem(30);
        margin: rem(80) auto rem(20);
        padding: rem(40) rem(40) 0 rem(40);
        .input-account {
          width: 100%;
          height: rem(88);
          padding-top: rem(20);
          font-size: rem(34);
          color: #333;
          border: 0 none;
          border-bottom: rem(2) solid #e5e5e5;
          -webkit-user-select: text !important;
          font-family: DINFront !important;
          outline: none;
          &::placeholder {
            font-size: rem(24);
            color: #a6a6a6;
          }
        }
        .form-container {
          width: 100%;
          background-color: #fff;
          border-radius: rem(20);
          &.title {
            background-color: transparent;
          }
          .form-title {
            width: 100%;
            height: rem(130);
            display: flex;
            li {
              height: 100%;
              text-align: center;
              font-size: rem(36);
              color: #666;
              padding-top: rem(30);
              &.active {
                color: $mainColor;
              }
              &:first-child {
                width: rem(393);
                flex: 0 0 auto;
                background: url('./assets/images/base/title-bg.png') no-repeat;
                background-size: 100% rem(130);
                text-align: left;
                padding-left: rem(60);
                color: #333;
                font-weight: bold;
              }
              &:last-child {
                flex: 1 0 auto;
                text-align: right;
                background: transparent;
                img {
                  width: rem(167);
                  height: rem(42);
                }
              }
            }
          }
          .form {
            padding: rem(10) rem(60) rem(40);
            margin-top: rem(-30);
            z-index: 3;
            background-color: #fff;
            border-radius: rem(20);
            box-shadow: 0 0 rem(5) rem(0) rgba(245, 246, 248, 1);
            position: relative;
            .form-item {
              position: relative;
              margin-top: rem(68);
              &.send-code {
                margin-top: rem(88);
              }
              .label {
                height: rem(40);
                line-height: rem(40);
                font-size: rem(30);
                color: #333;
                font-weight: bold;
              }
              .yd-input {
                height: rem(88);
                padding-top: rem(20);
                font-size: rem(34);
                color: #333;
                border-bottom: rem(2) solid #e5e5e5;
                -webkit-user-select: text !important;
                & > input::placeholder {
                  font-size: rem(24);
                  color: #a6a6a6;
                  font-weight: bold;
                }
              }
              &.number {
                input {
                  font-family: DINFront !important;
                }
              }
              .yd-btn {
                background: transparent;
                color: $mainColor;
                position: absolute;
                bottom: rem(16);
                right: 0;
                font-size: rem(26);
                padding-right: 0;
                &.yd-btn-disabled {
                  color: #666;
                }
              }
              &.flex {
                display: flex;
                height: rem(94);
                justify-content: space-between;
                align-items: flex-end;
                margin: 0;
                border-bottom: 1px solid #e5e5e5;
                padding-bottom: rem(4);
                &.company {
                  padding-right: rem(20);
                  .com-name {
                    display: inline-block;
                    width: 80%;
                    text-align: right;
                  }
                }
                &.send-code {
                  justify-content: flex-start;
                  .yd-input {
                    border-bottom: 0 none;
                    width: rem(200);
                    margin-left: rem(20);
                    position: relative;
                    padding-right: 0;
                    &:after {
                      display: none;
                    }
                    input {
                      padding-top: rem(20);
                      text-align: left;
                    }
                  }
                }
                .label {
                  flex: 0 0 auto;
                  font-size: rem(30);
                  font-weight: normal;
                }
                & > span {
                  font-size: rem(34);
                  color: #333;
                  font-weight: bold;
                }
                .yd-input {
                  border-bottom: 0 none;
                  padding-right: rem(48);
                  &:after {
                    content: '';
                    display: inline-block;
                    width: rem(34);
                    height: rem(36);
                    background: url('./assets/images/base/edit-info-icon.png')
                      no-repeat;
                    background-size: rem(34) rem(36);
                    position: absolute;
                    right: 0;
                    bottom: rem(6);
                  }
                  input {
                    padding-top: rem(20);
                    text-align: right;
                    font-size: rem(34);
                    font-weight: bold;
                  }
                }
                .confirm-info-content {
                  position: relative;

                  .yd-input {
                    border-bottom: 0 none;
                    padding-right: rem(48);
                    &:after {
                      content: '';
                      display: none;
                    }
                    input {
                      padding-top: rem(20);
                      text-align: right;
                    }
                  }
                  img {
                    position: absolute;
                    right: 0;
                    bottom: rem(2);
                    width: rem(34);
                    height: rem(36);
                  }
                }
              }
            }
            .submit-btn {
              width: rem(510);
              height: rem(80);
              line-height: rem(80);
              @include bg-linear-gradient(
                linear-gradient(
                  90deg,
                  rgba(245, 107, 50, 1) 1%,
                  rgba(236, 71, 54, 1) 100%
                )
              );
              border-radius: rem(40);
              font-size: rem(30);
              color: #fff;
              text-align: center;
              margin: rem(60) auto rem(34);
              border: 0 none;
              &.find-pw {
                margin-bottom: rem(40);
              }
              &.edit-pw {
                margin: rem(80) auto rem(44);
              }
              &.approve {
                margin: rem(20) auto rem(8);
              }
              &.confirmInfo {
                margin-top: rem(46);
                margin-bottom: rem(6);
              }
              &.select-company {
                margin-top: rem(38);
                margin-bottom: 0;
              }
            }
            .option {
              display: flex;
              justify-content: space-between;
              width: rem(510);
              font-size: rem(26);
              color: #333;
              line-height: 1.1;
              span:last-child {
                color: $mainColor;
              }
            }
            &.select-company {
              .form-item {
                margin-top: rem(30);
                position: relative;
                .label {
                  font-size: rem(30);
                }
                .label-text {
                  font-size: rem(22);
                  color: $mainColor;
                  font-weight: normal;
                }

                .yd-input {
                  padding-right: rem(20);
                  height: rem(78);
                }
              }
            }
            .select-company-icon {
              display: inline-block;
              width: rem(13);
              height: rem(22);
              background: url('./assets/images/base/select-company-icon.png')
                no-repeat;
              background-size: rem(13) rem(22);
              position: absolute;
              right: 0;
              bottom: rem(16);
            }
          }
        }
      }
    }
    .close-login-pop-content {
      width: rem(710);
      height: rem(100);
      margin: 0 auto rem(30);
      .close-login-pop {
        width: rem(710);
        height: rem(100);
        line-height: rem(100);
        border-radius: rem(26);
        text-align: center;
        font-size: rem(30);
        font-weight: bold;
        color: #333;
        background-color: #fff;

        box-shadow: 0 0 rem(20) rem(5) #f5f5f5;
      }
    }
  }
  .popup-select-company {
    box-sizing: content-box;
    .popup-search {
      position: absolute;
      left: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      z-index: 997;
      #pop_header {
        height: rem(88);
        width: 100%;
        flex: 0 0 auto;
        line-height: rem(88);
        font-size: rem(34);
        font-weight: bold;
        background: #fff;
        background-size: 100% rem(88);
        color: #333;
        text-align: center;
        .backIcon {
          width: rem(19);
          height: rem(36);
          background: url('./assets/images/back-b.png') no-repeat;
          background-size: rem(19) rem(36);
          display: inline-block;
          position: absolute;
          top: rem(24);
          left: rem(20);
        }
      }
      .main-search {
        height: rem(64);
        background: rgba(255, 255, 255, 1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        // padding: rem(8) rem(15);
        padding-right: 0;
        width: rem(690);
        .search-content {
          width: rem(608);
          height: rem(64);
          line-height: rem(64);
          background: rgba(245, 245, 245, 1);
          border-radius: rem(32);
          display: flex;
          justify-content: center;
          /*flex: 1;*/
          box-sizing: border-box;
          padding-left: rem(25);
          padding-right: rem(25);
          .content-icon {
            display: flex;
            align-items: center;
            margin-right: rem(17);
            i {
              display: block;
              width: rem(24);
              height: rem(27);
              background: url('./assets/images/base/search.png') center
                no-repeat;
              background-size: 100% 100%;
            }
          }
          .content-value {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            input {
              display: block;
              box-sizing: border-box;
              height: rem(40);
              line-height: rem(40);
              width: 100%;
              text-align: left;
              background-color: transparent;
              border: 0;
              resize: none;
              font-size: rem(28);
              font-family: PingFangSC-Regular;
              font-weight: 400;
              color: #333;
              -webkit-appearance: none;
              &::-webkit-search-cancel-button {
                display: none;
              }
              input::-webkit-input-placeholder {
                color: rgba(152, 156, 163, 1);
              }
              input:-moz-placeholder {
                color: rgba(152, 156, 163, 1);
              }
              input:-ms-input-placeholder {
                color: rgba(152, 156, 163, 1);
              }
            }
            .search-clear {
              width: rem(34);
              height: rem(33);
              background: url('./assets/images/base/clearSearch.png') no-repeat;
              background-size: 100% 100%;
            }
          }
        }
        .search-action {
          font-size: rem(28);
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: $mainColor;
          text-align: center;
          flex-shrink: 0;
        }
      }
      .select-company-warn {
        width: 100%;
        padding-left: rem(30);
        height: rem(60);
        margin: rem(20) 0 0;
        line-height: rem(50);
        text-align: left;
        align-items: center;
        display: flex;
        background: #fff9f5;
        color: $mainColor;
        font-size: rem(24);
      }
    }
    .company-list {
      position: absolute;
      top: rem(88 * 2+80);
      left: 0;
      right: 0;
      bottom: 0;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      ul {
        width: 100%;
        padding: 0 rem(30);
        li {
          display: flex;
          align-items: center;
          height: rem(87);
          font-size: rem(30);
          color: #333;
          position: relative;
          &:after {
            left: 0;
            right: 0;
            width: auto;
            height: 1px;
            position: absolute;
            z-index: 0;
            bottom: 0;
            content: '';
            background-image: -webkit-gradient(
              linear,
              left bottom,
              left top,
              color-stop(50%, #ececec),
              color-stop(0, transparent)
            );
            background-image: linear-gradient(0deg, #ececec 50%, transparent 0);
          }
        }
      }
    }
  }
}
</style>
